<template>
    <el-card :body-style="card_style">
        <!-- 项目卡片 -->
        <div class="card_body">
            <!-- 项目名称 -->
            <div class="card_body_title">
                <el-tag type="primary" size="mini" style="margin-right: 8px;">{{ item.type_txt }}</el-tag>{{ item.title }}
            </div>
            <!-- 项目状态 -->
            <div class="card_body_state">
                <el-tag :type="item.state == 1 ? 'warning' : 'success' " size="small">{{ item.state_txt }}</el-tag>
            </div>
            <!-- 项目统计数据 -->
            <div class="card_body_tj">
                <span>收到数据: {{ item.statistics }}</span>
                <span>更新: {{ item.created_time }}</span>
            </div>
            <!-- 卡片操作栏 -->
            <div class="card_bottom">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <router-link to="/create">
                            <i class="el-icon-s-tools"></i> 设置
                        </router-link>
                    </el-col>
                    <el-col :span="5">
                        <router-link to="/editor/">
                            <i class="btn-icon icon-edit"></i>表单
                        </router-link>
                    </el-col>
                    <el-col :span="5">
                        <router-link to="/publish">
                            <i class="btn-icon icon-publish"></i>发布
                        </router-link>
                    </el-col>
                    <el-col :span="5">
                        <router-link to="/publish">
                            <i class="el-icon-s-data"></i> 统计
                        </router-link>
                    </el-col>
                    <el-col :span="4">
                        <el-dropdown placement="bottom">
                            <span class="el-dropdown-link">
                                <i class="el-icon-more"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                  导出项目
                                </el-dropdown-item>
                                <el-dropdown-item>
                                  暂停项目
                                </el-dropdown-item>
                                <el-dropdown-item>
                                  删除项目
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-card>
</template>

<script>
  import instance from "../../assets/config/instance";

  export default {
    name: "Card",
    props:{
        item : {
            default(){
                return {}
            }
        }
    },
    data(){
        return {
          card_style : { padding: '0px', height : '166px'  }
        }
    },
    methods : {

    }
  }
  </script>

<style lang="scss" scoped>
@import "../../assets/theme";

.project-list{
  .el-card{
    border: 1px solid #dddddd;
    border-radius: 6px;

    .card_body{
      padding: 10px;
      position: relative;
      height: 166px;
      overflow: hidden;

      .card_body_title{
        padding: 6px;
        height: 52px;
        line-height: 20px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .card_body_state{
        padding: 4px 8px 8px 8px;
        line-height: 24px;
        font-size: .8rem;
      }

      .card_body_tj{
        padding: 6px 8px;
        font-size: 12px;
        color: #999999;
        display: flex;
        justify-content: space-between;
      }

      .card_bottom{
        height: 38px;
        line-height: 16px;
        position: absolute;
        bottom: 0;
        left: -10px;
        background-color: #f5f6fa;
        width: calc(100% + 20px);
        padding: 0 20px;
        font-size: 14px;

        .el-col{
            text-align: center;
            border-right: 1px solid #dddddd;
            height: 16px;
            margin: 12px 0;
            padding: 0 6px !important;
            font-size: 13px;

            &:last-child{
                border-right: 0;
            }
        }
      }
    }
  }
}
</style>